<template>
  <div>
    <!-- 表头 -->
    <div class="header-ones">
      <div class="iconfont icon-left jiantous" @click="homeFn"></div>
      <div class="gouwus">个人中心</div>
      <div class="iconfont icon-ellipsis classis"></div>
    </div>
    <!-- 登陆注册 -->
    <div class="denglus">
      <div class="shezhi">
        <img src="../assets/shezhi.png" alt @click="shezhiFn" />
      </div>
      <div class="zhuce">
        <div class="logoone">
          <i class="beijing"></i>
        </div>
        <div class="texts">
          <div v-if="boolean">
            <label class="zc" @click="dengluFn">登录</label>/
            <label>注册</label>
          </div>
          <div class="disnoe" v-else>
            <div class="none">
              <p>{{name}}</p>
              <div>
                <span>普卡会员</span>
                <img src="../assets/huiyuan.png" alt />
              </div>
            </div>
            <div class="yinying">
              <div>
                <div class="font">成长值0</div>
                <div class="font">差500可领福利</div>
              </div>
              <div class="right-sanjiao"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 收藏/福利/人人惠 -->
    <div class="men-xin">
      <div class="repeat">
        <div class="pict">
          <img src="../assets/xiaoxinxin.png" alt />
        </div>
        <div class="shoucang">我的收藏</div>
        <div class="no-shoucang">您还没有收藏</div>
      </div>
      <div class="repeat">
        <div class="pict">
          <img src="../assets/liwu.png" alt />
        </div>
        <div class="shoucang">我的福利</div>
        <div class="no-shoucang">海量优惠券</div>
      </div>
      <div class="repeat">
        <div class="pict">
          <img src="../assets/renrenhui.png" alt />
        </div>
        <div class="shoucang">人人惠</div>
        <div class="no-shoucang">分享惠更多</div>
      </div>
    </div>
    <!-- 我的钱包 -->
    <div class="wallet">
      <div class="jifen">
        <div class="num">0</div>
        <div class="jifens">积分</div>
      </div>
      <div class="jifen">
        <div class="num">0</div>
        <div class="jifens">优惠券</div>
      </div>
      <div class="jifen">
        <div class="num">0</div>
        <div class="jifens">电子卡</div>
      </div>
      <div class="jifen">
        <div class="nums">
          <img src="../assets/erweima.png" alt />
        </div>
        <div class="jifens">会员支付</div>
      </div>
      <div class="jifen">
        <div class="nums">
          <img src="../assets/qianbao.png" alt />
        </div>
        <div class="jifens">我的钱包</div>
      </div>
    </div>
    <!-- 我的订单 -->
    <div class="ding">
      <div class="jifen">
        <div class="nums">
          <img src="../assets/qianbaoa.png" alt />
        </div>
        <div class="jifens">待付款</div>
      </div>
      <div class="jifen">
        <div class="nums">
          <img src="../assets/kuaidiche.png" alt />
        </div>
        <div class="jifens">待收货</div>
      </div>
      <div class="jifen">
        <div class="nums">
          <img src="../assets/daipingjia.png" alt />
        </div>
        <div class="jifens">待评价</div>
      </div>
      <div class="jifen">
        <div class="nums">
          <img src="../assets/shouhou.png" alt />
        </div>
        <div class="jifens">售后</div>
      </div>
      <div class="jifen">
        <div class="nums">
          <img src="../assets/dingdan.png" alt />
        </div>
        <div class="jifens">我的订单</div>
      </div>
    </div>
    <!-- 银行卡活动 -->
    <div class="activity">
      <div class="mianfei">
        <ul class="ulitivety">
          <li>
            <div class="pci">
              <div class="yinhang">
                <img src="../assets/yinhangka.png" alt />
              </div>银行卡活动
            </div>
            <div class="meizhou">
              <div class="ziti">每周六150减30元</div>
              <div class="sanjiao"></div>
            </div>
          </li>
          <li>
            <div class="pci">
              <div class="yinhang">
                <img src="../assets/liuliang.png" alt />
              </div>免费领流量
            </div>
            <div class="meizhou">
              <div class="ziti">线上线下比比消费送流量</div>
              <div class="sanjiao"></div>
            </div>
          </li>
          <li>
            <div class="pci">
              <div class="yinhang">
                <img src="../assets/fapiao.jpg" alt />
              </div>发票中心
            </div>
            <div class="meizhou">
              <div class="ziti">联华线下订单电子发票</div>
              <div class="sanjiao"></div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 客服帮助中心 -->
    <div class="activity">
      <div class="mianfei">
        <ul class="ulitivety">
          <li>
            <div class="pci">
              <div class="yinhang">
                <img src="../assets/erji.png" alt />
              </div>联系客服
            </div>
            <div class="meizhou">
              <div class="sanjiao"></div>
            </div>
          </li>
          <li>
            <div class="pci">
              <div class="yinhang">
                <img src="../assets/bangzhu.png" alt />
              </div>帮助中心
            </div>
            <div class="meizhou">
              <div class="sanjiao"></div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 为您推荐 -->
    <div class="xuanran">
      <div class="box-hezi">
        <div class="tuijian">
          <div>为您推荐</div>
          <div class="xiaoxitiao"></div>
        </div>
        <div class="shuju">
          <ul>
            <li v-for="(item,i) in arr" :key="i">
              <div class="tus">
                <img :src="item.img" alt />
              </div>
              <div class="wenziti">{{item.title}}</div>
              <div class="money">
                ￥
                <span>{{item.price}}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      arr: [],
      boolean: true,
      boo: "",
      num: 0,
      name : ''
    };
  },
  mounted() {
    this.name=localStorage.getItem("name");
    if (this.name) {
      this.boolean = false;
    } else {
      this.boolean = true;
    }
    this.getdata();
  },
  methods: {
    //跳转设置页面
    shezhiFn() {
      this.$router.push("/shezhi");
    },
    //跳转登录页面
    dengluFn() {
      this.$router.push("/denglu");
    },
    //获取数据
    getdata() {
      axios({
        url: "http://localhost/api.php/like/phonelist",
        method: "get",
        params: {
          transform: 1,
          order: "id,desc"
        }
      }).then(res => {
        this.arr = res.data.phonelist;
        console.log(this.arr);
      });
    },
    //跳转主页
    homeFn() {
      this.$router.push("/");
    }
  }
};
</script>

<style>
.disnoe {
  display: flex;
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.right-sanjiao {
  width: 0;
  height: 0;
  border: 0.1rem solid;
  margin-left: 0.2rem;
  border-color: transparent transparent transparent #ccc;
  margin-right: -0.2rem;
}
.font {
  font-size: 0.2rem;
}
.yinying {
  width: 1.8rem;
  height: 0.7rem;
  background-image: linear-gradient(
    -90deg,
    rgba(59, 59, 59, 0.3) 0%,
    rgba(0, 0, 0, 0.3) 100%
  );
  border-radius: 1.33333rem 0 0 1.33333rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0.4rem;
  font-size: 0.32rem;
  text-align: right;
}
.texts .none div {
  display: flex;
  margin-top: 0.15rem;
}
.texts img {
  width: 0.3rem;
  height: 0.3rem;
}
.texts p {
  margin: 0;
  padding: 0;
}
.texts span {
  font-size: 0.24rem;
}
.tus {
  background: #fff;
}

.tus img {
  width: 96%;
}
.money span {
  font-size: 0.23rem;
  font-weight: bold;
}
.money {
  height: 0.53333rem;
  line-height: 0.37333rem;
  margin-top: 0.08rem;
  color: #151515;
  font-size: 0.22rem;
}
.wenziti {
  height: 0.88rem;
  line-height: 0.44rem;
  margin-left: 0.13333rem;
  margin-top: 0.13333rem;
  margin-right: 0.13333rem;
  font-size: 0.22rem;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  overflow: hidden;
}
.xuanran {
  background: #ffffff;
}
.shuju ul {
  border-bottom: 1px solid #ddd;
  margin: 0.13333rem;
}
.shuju ul li {
  display: inline-block;
  width: 50%;
  margin-bottom: 0.34667rem;
  position: relative;
}
.xiaoxitiao {
  display: block;
  width: 35px;
  height: 1px;
  margin: 0px auto;
  background: rgb(0, 0, 0);
}
.tuijian div:nth-child(1) {
  text-align: center;
  padding-top: 20px;
  color: rgb(51, 51, 51);
  font-size: 0.25rem;
}
.tuijian {
  height: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.box-hezi {
  background: #fff;
}
.meizhou {
  display: flex;
  align-items: center;
}
.sanjiao {
  width: 0;
  height: 0;
  border: 0.07rem solid #ccc;
  border-color: transparent transparent transparent #ccc;
  margin-left: 0.2rem;
}
.ziti {
  color: #aaaaaa;
  font-size: 0.24rem;
  max-width: 4.26667rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yinhang img {
  width: 100%;
}
.yinhang {
  width: 0.3rem;
  margin-right: 0.2rem;
}
.pci {
  display: flex;
  align-items: center;
  color: #666666;
  font-size: 0.24rem;
}
.ulitivety li {
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 0.9rem;
}
.mianfei {
  padding: 0 0.2rem;
  background: #ffffff;
  margin-bottom: 0.26667rem;
}
.ding {
  background: #fff;
  display: flex;
  height: 1.5rem;
  margin-bottom: 0.2rem;
}
.nums {
  width: 0.35rem;
  height: 0.35rem;
  margin: 0 auto 0.3rem;
  position: relative;
}
.nums img {
  vertical-align: middle;
  width: 100%;
  height: auto;
}
.jifens {
  font-size: 0.2rem;
  text-align: center;
}
.num {
  font-size: 0.3rem;
  line-height: 0.56rem;
  margin-bottom: 0.1rem;
}
.wallet {
  background: #fff;
  display: flex;
  height: 1.7rem;
  margin-bottom: 0.2rem;
}
.jifen {
  flex: 1;
  padding-top: 0.3rem;
  text-align: center;
  font-size: 0.32rem;
}
.repeat {
  flex: 1;
  padding-top: 0.2rem;
  padding-bottom: 0.1rem;
}
.shoucang {
  text-align: center;
  font-size: 0.2rem;
  line-height: 0.3rem;
}
.no-shoucang {
  color: #999999;
  font-size: 0.2rem;
  line-height: 0.37333rem;
  text-align: center;
}
.pict {
  width: 0.41rem;
  height: 0.41rem;
  margin: 0 auto 0.1rem;
}
.pict img {
  width: 100%;
}
.men-xin {
  display: flex;
  padding: 0.1rem 0;
  background: #fff;
  margin-bottom: 0.2rem;
}
.texts label {
  color: #ffffff;
  font-family: inherit;
  font-size: 0.26rem;
}
.texts {
  color: #ffffff;
  flex: 1;
}
.zhuce {
  display: flex;
  align-items: center;
  padding-left: 0.26rem;
  padding-bottom: 0.2rem;
}
.beijing {
  background: url("../assets/logo1.png");
  width: 100%;
  height: 100%;
  display: inline-block;
  background-size: cover;
}
.logoone {
  margin-right: 0.2rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  overflow: hidden;
}
.shezhi img {
  width: 0.5rem;
  height: 0.5rem;
}
.shezhi {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 0.18rem;
  margin-bottom: 0.1rem;
}
.denglus {
  padding: 0.1rem 0 0.32rem;
  background: #e83448;
  padding-top: 0.8rem;
}
body {
  background: #f5f5f5;
}
.jiantous {
  font-size: 0.4rem;
  color: #888;
}
.classis {
  font-size: 0.5rem;
  color: #000;
}
.header-ones {
  position: fixed;
  z-index: 9999;
  width: 94%;
  display: flex;
  padding: 0.1rem 0.2rem;
  justify-content: space-between;
  background-color: #f5f5f5;
  color: #444;
  line-height: 0.5rem;
}
</style>